<template>
  <div class="List">
    <div class="content" :style="{backgroundColor:Styles.mode===2?'rgba(255,255,255,.04)':'#fff'}">
      <div class="text">
        <div>
          <span :style="{color:Styles.color}">{{obj.word_text}}</span>
          <span :style="{color:Styles.color }" v-if="obj.usa_phonetic_transcription!=-1">{{obj.usa_phonetic_transcription}}</span>
        </div>
        <div :style="{color:Styles.color }">
          {{obj.dict_comment_mean}}
        </div>
      </div>
      <div class="icon" @click="ispaly" :class="{'active':ispay&&Styles.mode===1,'actives':ispay&&Styles.mode===2}">
        <!--<i class="iconfont icon-yinpin" v-if="icon"-->
           <!--:class="{'active':ispay&&Styles.mode===1,'actives':ispay&&Styles.mode===2}"></i>-->
        <div v-if="icon">
          <icons :icons="ispay" :styles="IconStyle"></icons>
        </div>
      </div>
    </div>
    <audio v-if="obj.usa_voice_url !== '-1'" ref="audio" :src="obj.usa_voice_url" preload="auto" @timeupdate="state"></audio>
  </div>
</template>

<script>
  import icons from '../../../icons/index'

  export default {
    name: "index",
    data: function () {
      return {
        audio: null,
        ispay: false,
        IconStyle: {
          "margin-left": '0rem'
        },
      }
    },
    components: {icons},
    props: ['Styles', 'obj', 'icon'],
    mounted: function () {
      this.audio = this.$refs.audio
    },
    methods: {
      state: function (e) {
        let audio = e.target
        if (!audio.paused) {
          this.ispay = true
        } else {
          this.ispay = false
        }
      },
      ispaly: function () {
        if (!this.audio.paused) {
          this.ispay = false
          this.audio.pause()
        } else {
          this.ispay = true
          this.audio.load()
          this.audio.play()
        }
      },
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
